﻿<!--
文件名称: index.html
完整存储路径: frontend/templates/index.html
功能说明: 系统主页 - 功能导航中心，展示系统概览和快速操作入口
版本: 2.0.0
最后修改: 2025-01-27
使用说明:
    1. 通过浏览器访问 "/index" 获取系统主页
    2. 页面展示欢迎信息、核心统计、快速操作入口、数据概览和最近活动
    3. 继承基础模板，包含侧边栏和顶部导航
    4. 响应式设计，适配不同屏幕尺寸
-->

{% extends "layouts/base.html" %}
{% block title %}系统主页 - 中医适宜技术防控青少年近视系统{% endblock %}

{% block content %}
<main class="main-content-container">
  <!-- 欢迎信息区域 -->
  <section class="welcome-section">
    <div class="welcome-content">
      <div class="welcome-text">
        <h1 class="welcome-title">
          <i class="bi bi-house-heart"></i>
          欢迎回来，<span id="user-name">{{ current_user.username if current_user else '用户' }}</span>
        </h1>
        <p class="welcome-subtitle">数据更新于：<span id="update-time">{{ current_time }}</span></p>
      </div>
      <div class="welcome-actions">
        <button class="btn-refresh" onclick="refreshData()">
          <i class="bi bi-arrow-clockwise"></i>
          刷新数据
        </button>
      </div>
    </div>
  </section>

  <!-- 核心统计卡片区域 -->
  <section class="stats-section">
    <div class="stats-grid">
      <div class="stat-card stat-primary">
        <div class="stat-icon">
          <i class="bi bi-people"></i>
        </div>
        <div class="stat-content">
          <h3 class="stat-title">学生总数</h3>
          <div class="stat-value" id="total-students">{{ total_students or '2,008' }}</div>
          <div class="stat-change stat-positive">
            <i class="bi bi-arrow-up"></i>
            <span id="students-change">+15</span> 今日新增
          </div>
        </div>
      </div>

      <div class="stat-card stat-success">
        <div class="stat-icon">
          <i class="bi bi-eye"></i>
        </div>
        <div class="stat-content">
          <h3 class="stat-title">视力记录</h3>
          <div class="stat-value" id="total-vision">{{ total_vision or '1,856' }}</div>
          <div class="stat-change stat-positive">
            <i class="bi bi-arrow-up"></i>
            <span id="vision-change">+23</span> 今日新增
          </div>
        </div>
      </div>

      <div class="stat-card stat-warning">
        <div class="stat-icon">
          <i class="bi bi-heart-pulse"></i>
        </div>
        <div class="stat-content">
          <h3 class="stat-title">干预治疗</h3>
          <div class="stat-value" id="total-intervention">{{ total_intervention or '892' }}</div>
          <div class="stat-change stat-positive">
            <i class="bi bi-arrow-up"></i>
            <span id="intervention-change">+8</span> 今日新增
          </div>
        </div>
      </div>

      <div class="stat-card stat-info">
        <div class="stat-icon">
          <i class="bi bi-telephone"></i>
        </div>
        <div class="stat-content">
          <h3 class="stat-title">随访管理</h3>
          <div class="stat-value" id="total-followup">{{ total_followup or '456' }}</div>
          <div class="stat-change stat-positive">
            <i class="bi bi-arrow-up"></i>
            <span id="followup-change">+5</span> 今日新增
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 快速操作区域 -->
  <section class="quick-actions-section">
    <div class="section-header">
      <h2 class="section-title">
        <i class="bi bi-lightning"></i>
        快速操作
      </h2>
      <p class="section-subtitle">常用功能快速入口</p>
    </div>
    
    <div class="quick-actions-grid">
      <div class="action-card" onclick="navigateTo('/student-complete-record')">
        <div class="action-icon">
          <i class="bi bi-person-plus"></i>
        </div>
        <h3 class="action-title">录入学生档案</h3>
        <p class="action-desc">新增学生基本信息</p>
        <div class="action-badge">常用</div>
      </div>

      <div class="action-card" onclick="navigateTo('/vision-records')">
        <div class="action-icon">
          <i class="bi bi-eye"></i>
        </div>
        <h3 class="action-title">视力记录录入</h3>
        <p class="action-desc">记录视力检查数据</p>
        <div class="action-badge">常用</div>
      </div>

      <div class="action-card" onclick="navigateTo('/interventions')">
        <div class="action-icon">
          <i class="bi bi-heart-pulse"></i>
        </div>
        <h3 class="action-title">干预治疗记录</h3>
        <p class="action-desc">记录治疗干预过程</p>
        <div class="action-badge">常用</div>
      </div>

      <div class="action-card" onclick="navigateTo('/phone-followup')">
        <div class="action-icon">
          <i class="bi bi-telephone"></i>
        </div>
        <h3 class="action-title">随访管理</h3>
        <p class="action-desc">电话随访记录</p>
        <div class="action-badge">常用</div>
      </div>

      <div class="action-card" onclick="navigateTo('/query')">
        <div class="action-icon">
          <i class="bi bi-search"></i>
        </div>
        <h3 class="action-title">数据查询</h3>
        <p class="action-desc">多维度数据查询</p>
      </div>

      <div class="action-card" onclick="navigateTo('/chart')">
        <div class="action-icon">
          <i class="bi bi-graph-up"></i>
        </div>
        <h3 class="action-title">统计分析</h3>
        <p class="action-desc">图表数据分析</p>
      </div>

      <div class="action-card" onclick="navigateTo('/report')">
        <div class="action-icon">
          <i class="bi bi-file-earmark-text"></i>
        </div>
        <h3 class="action-title">统计报表</h3>
        <p class="action-desc">生成分析报告</p>
      </div>

      <div class="action-card" onclick="navigateTo('/import')">
        <div class="action-icon">
          <i class="bi bi-upload"></i>
        </div>
        <h3 class="action-title">数据导入</h3>
        <p class="action-desc">批量导入数据</p>
      </div>
    </div>
  </section>

  <!-- 数据概览区域 -->
  <section class="overview-section">
    <div class="overview-grid">
      <!-- 视力健康趋势 -->
      <div class="overview-card">
        <div class="overview-header">
          <h3 class="overview-title">
            <i class="bi bi-graph-up"></i>
            视力健康趋势
          </h3>
          <div class="overview-actions">
            <button class="btn-mini" onclick="refreshChart('vision-trend')">
              <i class="bi bi-arrow-clockwise"></i>
            </button>
            <button class="btn-mini" onclick="navigateTo('/chart')">
              <i class="bi bi-arrow-right"></i>
            </button>
          </div>
        </div>
        <div class="overview-content">
          <canvas id="visionTrendChart" height="200"></canvas>
        </div>
      </div>

      <!-- 系统状态 -->
      <div class="overview-card">
        <div class="overview-header">
          <h3 class="overview-title">
            <i class="bi bi-gear"></i>
            系统状态
          </h3>
          <div class="overview-actions">
            <button class="btn-mini" onclick="refreshSystemStatus()">
              <i class="bi bi-arrow-clockwise"></i>
            </button>
          </div>
        </div>
        <div class="overview-content">
          <div class="status-list">
            <div class="status-item status-success">
              <i class="bi bi-check-circle"></i>
              <span>系统运行正常</span>
            </div>
            <div class="status-item status-info">
              <i class="bi bi-people"></i>
              <span>在线用户：<span id="online-users">-</span>人</span>
            </div>
            <div class="status-item status-warning">
              <i class="bi bi-clock"></i>
              <span>数据同步：<span id="sync-status">正常</span></span>
            </div>
            <div class="status-item status-success">
              <i class="bi bi-shield-check"></i>
              <span>安全状态：良好</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 最近活动区域 -->
  <section class="recent-activity-section">
    <div class="section-header">
      <h2 class="section-title">
        <i class="bi bi-clock-history"></i>
        最近活动
      </h2>
              <button class="btn-text" onclick="navigateTo('/operation-log')">
        查看全部
        <i class="bi bi-arrow-right"></i>
      </button>
    </div>
    
    <div class="activity-list" id="recent-activities">
      <!-- 活动列表将通过JavaScript动态加载 -->
      <div class="activity-item">
        <div class="activity-icon">
          <i class="bi bi-person-plus"></i>
        </div>
        <div class="activity-content">
          <div class="activity-title">新增学生档案</div>
          <div class="activity-desc">张三 - 实验小学三年级</div>
          <div class="activity-time">2分钟前</div>
        </div>
      </div>

      <div class="activity-item">
        <div class="activity-icon">
          <i class="bi bi-eye"></i>
        </div>
        <div class="activity-content">
          <div class="activity-title">录入视力记录</div>
          <div class="activity-desc">李四 - 视力检查完成</div>
          <div class="activity-time">5分钟前</div>
        </div>
      </div>

      <div class="activity-item">
        <div class="activity-icon">
          <i class="bi bi-heart-pulse"></i>
        </div>
        <div class="activity-content">
          <div class="activity-title">干预治疗记录</div>
          <div class="activity-desc">王五 - 耳穴压丸治疗</div>
          <div class="activity-time">10分钟前</div>
        </div>
      </div>

      <div class="activity-item">
        <div class="activity-icon">
          <i class="bi bi-telephone"></i>
        </div>
        <div class="activity-content">
          <div class="activity-title">电话随访</div>
          <div class="activity-desc">赵六 - 随访完成</div>
          <div class="activity-time">15分钟前</div>
        </div>
      </div>
    </div>
  </section>
</main>
{% endblock %}

{% block styles %}
  {{ super() }}
  <!-- 加载首页专用 CSS 文件 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
{% endblock %}

{% block scripts %}
  {{ super() }}
  <!-- 加载首页专用 JavaScript 文件 -->
  <script src="{{ url_for('static', filename='js/index.js') }}"></script>
{% endblock %}
